<template>
  <nut-pull-refresh
      v-model="refresh"
      @refresh="refreshFun"
      loosing-txt="松开吧"
      loading-txt="玩命加载中..."
      :complete-duration="1000"
  >
    <nut-grid  :column-num="3" :border="false">
      <nut-grid-item v-for="item in sockets" :key="item.id" :text="item.text" class="flex">
        <nut-image
          :src="img"
          width="100%"
          height="100%"
          @click="onShowImage(item.id)"
        />
        <nut-image-preview
            :images="[{src: img}]"
            :show="shouImageId === item.id"
            @close="onHideImage"
        />
      </nut-grid-item>
    </nut-grid>
  </nut-pull-refresh>
</template>

<script lang="ts" setup>
import {ref} from "vue";
import img from "@/assets/img/sockets/img.png"
const refresh = ref(false)
const shouImageId = ref('')
const sockets = [
  {
    id: '1',
    image: img,
    text: '袜子1'
  },
  {
    id: '2',
    image: img,
    text: '袜子2'
  },
  {
    id: '3',
    image: img,
    text: '袜子1'
  },
  {
    id: '4',
    image: img,
    text: '袜子1'
  },
  {
    id: '5',
    image: img,
    text: '袜子1'
  },
  {
    id: '6',
    image: img,
    text: '袜子1'
  }
]

const refreshFun = () => {
  refresh.value = true
  setTimeout(()=> {
    refresh.value = false
  }, 3000)
}

const onShowImage = (id: string) => {
  shouImageId.value = id
}

const onHideImage = () => {
  shouImageId.value = ''
}
</script>

<style scoped lang="scss">

</style>